<template>
  <div class="detail">
    <div class="self_info box">
      <div class="user_head">
        <div class="iconfont icon-touxiang6"></div>
      </div>
      <div class="user_info">
        <div class="user_name">
          {{ formData.userName }}
        </div>
        <div class="user_post">
          {{ formData.loginName }}
        </div>
      </div>
    </div>
    <!-- <div class="login_info box">
      <div class="box_title">
        <span class="text">登录信息</span>
      </div>
      <div class="box_info">
        <div class="left">登录账号</div>
        <div class="right">{{ formData.loginName }}</div>
      </div>
      <div v-for="(item, index) in formData.orgPostList" :key="index">
        <div class="box_info">
          <div class="left">所属机构</div>
          <div class="right">{{ item.orgName }}</div>
        </div>
        <div class="box_info">
          <div class="left">职位</div>
          <div class="right">{{ orgPostName(item.orgPostIdList, item.orgPostId) }}</div>
        </div>
      </div>
    </div> -->
    <div class="basic_info box">
      <div class="box_title">
        <span class="text">基本信息</span>
      </div>
      <div class="box_info">
        <div class="left">登录账号</div>
        <div class="right">{{ formData.loginName }}</div>
      </div>
      <div class="box_info">
        <div class="left">手机号码</div>
        <div class="right">{{ formData.telephone }}</div>
      </div>
      <div class="box_info">
        <div class="left">固定电话</div>
        <div class="right">{{ formData.fixedphone }}</div>
      </div>
      <div class="box_info">
        <div class="left">邮箱</div>
        <div class="right">{{ formData.email }}</div>
      </div>
      <div class="box_info">
        <div class="left">出生日期</div>
        <div class="right">{{ formData.birthday }}</div>
      </div>
      <div class="box_info">
        <div class="left">性别</div>
        <div class="right">{{ formData.gender == 1 ? '男' : '女' }}</div>
      </div>
      <div class="box_info">
        <div class="left">政治面貌</div>
        <div class="right">{{ politicalOutlook }}</div>
      </div>
      <div class="box_info">
        <div class="left">学历</div>
        <div class="right">{{ education }}</div>
      </div>
      <div class="box_info">
        <div class="left">人员类别</div>
        <div class="right">{{ userCategory }}</div>
      </div>
      <div class="box_info">
        <div class="left">上级领导</div>
        <div class="right">{{ mainLeader }}</div>
      </div>
      <div class="box_info">
        <div class="left">用户身份</div>
        <div class="right">{{ userIdentity }}</div>
      </div>
      <div class="box_info">
        <div class="left">用户状态</div>
        <div class="right">{{ userStatus }}</div>
      </div>
    </div>
    <div class="login_info box">
      <div class="box_title">
        <span class="text">权限信息</span>
      </div>
      <div v-for="(item, index) in formData.orgPostList" :key="index">
        <div class="box_info">
          <div class="left">所属机构</div>
          <div class="right">{{ item.orgName }}</div>
        </div>
        <!-- <div class="box_info" v-if="isShowQx">
          <div class="left">职位</div>
          <div class="right">{{ orgPostName(item.orgPostIdList, item.orgPostId) }}</div>
        </div> -->

        <!-- <div class="box_info" v-if="!isShowQx">
          <div class="left">职位</div>
          <div class="right">
            <div class="depart_list_val" @click="onPickerShow(1)">
              {{
                orgPostName(item.orgPostIdList, item.orgPostId) ? orgPostName(item.orgPostIdList, item.orgPostId) : '请选择职位'
              }}
              <van-icon name="arrow-down" size="16" />
            </div>
            <van-popup v-model="showPickerQ" round position="bottom">
              <van-picker
                show-toolbar
                :columns="item.orgPostIdList"
                default-index="0"
                value-key="postName"
                @cancel="showPickerQ = false"
                @confirm="onConfirmQ"
              />
            </van-popup>
          </div>
        </div> -->
      </div>
      <!-- <div class="box_info">
        <div class="left">角色</div>
        <div class="right">{{ userInfo.loginPostInfo.postName }}</div>
      </div> -->
      <van-button
        v-if="!isShowQx"
        @click="setData"
        class="subbmit"
        type="default"
        :loading="subLoading"
        :disabled="subLoading"
        loading-text="提交中...">
        确定
      </van-button>
    </div>
  </div>
</template>

<script>
import {
  listCodeData,
  listUserData,
  getUiasUserDetail,
  getFailureUiasUserDetail,
  listUiasOrgPost,
  listRoleData,
  saveOrEditUser,
} from '@api/user.js'
import { updateOtherDeal } from '@api/api-democratic.js'
import MyNavBar from '@com/MyNavBar'
export default {
  name: 'userNotificationDetail',
  components: { MyNavBar },
  props: {
    /* 权限信息是否能操作 */
    isShowQx: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      userInfo: JSON.parse(localStorage.userInfo),
      varifyResult: '1',
      opinion: '',

      tenantId: localStorage.tenantId,
      formData: {
        tenantId: localStorage.tenantId,
        orgPostList: [
          {
            isMainLead: 0,
            isDefault: 1,
            orgPostIdList: [],
          },
        ],
      },
      id: this.$route.query.id,
      userId: this.$route.query.userId,
      orgId: this.$route.query.orgId,
      needDealId: this.$route.query.needDealId,
      orgName: localStorage.userInfo ? JSON.parse(localStorage.userInfo).loginPostInfo.orgName : '',
      educationList: [],
      userCategoryList: [],
      politicalOutlookList: [],
      userIdentityList: [],
      userStatusList: [],
      roleList: [],
      mainLeaderList: [],
      showPickerQ: false,
      subLoading: false,
      columnsPost: [],
    }
  },
  computed: {
    /* 政治面貌 */
    politicalOutlook() {
      for (let i = 0; i < this.politicalOutlookList.length; i++) {
        const item = this.politicalOutlookList[i]
        if (item.code == this.formData.politicalOutlook) {
          return item.name
        }
      }
    },
    /* 学历 */
    education() {
      for (let i = 0; i < this.educationList.length; i++) {
        const item = this.educationList[i]
        if (item.code == this.formData.education) {
          return item.name
        }
      }
    },
    /* 人员类别 */
    userCategory() {
      for (let i = 0; i < this.userCategoryList.length; i++) {
        const item = this.userCategoryList[i]
        if (item.code == this.formData.userCategory) {
          return item.name
        }
      }
    },
    /* 用户身份 */
    userIdentity() {
      for (let i = 0; i < this.userIdentityList.length; i++) {
        const item = this.userIdentityList[i]
        if (item.code == this.formData.userIdentity) {
          return item.name
        }
      }
    },
    /* 用户状态 */
    userStatus() {
      for (let i = 0; i < this.userStatusList.length; i++) {
        const item = this.userStatusList[i]
        if (item.code == this.formData.userStatus) {
          return item.name
        }
      }
    },
    /* 用户状态 */
    mainLeader() {
      let leaderList = ''
      for (let i = 0; i < this.mainLeaderList.length; i++) {
        const item = this.mainLeaderList[i]
        for (let j = 0; j < this.formData.mainLeader.length; j++) {
          const itemJ = this.formData.mainLeader[j]
          if (item.id == itemJ) {
            if (j != this.formData.mainLeader.length - 1) {
              leaderList += ','
            }
            leaderList += item.userName
          }
        }
      }
      return leaderList
    },
    /* 职位 */
    orgPostName() {
      return (data, orgPostId) => {
        if (data) {
          for (let i = 0; i < data.length; i++) {
            const item = data[i]
            if (item.id == orgPostId) {
              return item.postName
            }
          }
        }
      }
    },
  },
  watch: {},
  created() {
    this.initDetailsData()
  },
  mounted() {},
  methods: {
    /* 初始化人员数据 */
    initdata(type) {
      listUserData({
        pageNum: 1,
        pageSize: 10000,
        tenantId: this.formData.tenantId,
        key: '',
      }).then(res => {
        if (res.status == 200) {
          let { content, totalPages, totalSize } = res.data
          this.mainLeaderList = content
        }
      })
    },
    /* 初始化参数配置 */
    initListCodeDatadata(codeType) {
      listCodeData({ codeType: codeType }).then(res => {
        if (res.status == 200) {
          if (codeType == '1000') {
            this.politicalOutlookList = res.data
          } else if (codeType == '1001') {
            this.educationList = res.data
          } else if (codeType == 'user_category') {
            this.userCategoryList = res.data
          } else if (codeType == 'user_identity') {
            this.userIdentityList = res.data
          } else if (codeType == 'user_status') {
            this.userStatusList = res.data
          }
        }
      })
    },
    /* 初始化职位配置 */
    initlistUiasOrgPostdata(orgId, index) {
      listUiasOrgPost({
        pageNum: 1,
        pageSize: 10000,
        orgId: this.orgId,
        tenantId: this.tenantId,
      }).then(res => {
        if (res.status == 200) {
          // this.formData.orgPostList[index].orgPostIdList = res.data.content;
          this.$set(this.formData.orgPostList[index], 'orgPostIdList', res.data.content)
        }
      })
    },
    /* 初始化角色配置 */
    initlistRoleDatadata() {
      listRoleData({
        status: '',
        tenantId: this.formData.tenantId,
      }).then(res => {
        if (res.status == 200) {
          // this.formData.orgPostList[index].orgPostIdList = res.data.content;
          this.roleList = res.data
        }
      })
    },
    /* 创建编辑 */
    initDetailsData() {
      this.initListCodeDatadata('1000')
      this.initListCodeDatadata('1001')
      this.initListCodeDatadata('user_category')
      this.initListCodeDatadata('user_identity')
      this.initListCodeDatadata('user_status')
      if (this.$refs['formData']) {
        this.$refs['formData'].resetFields()
      }
      this.temporaryPwd = ''
      this.$set(this.formData, 'id', '')
      this.$set(this.formData, 'leadChargeDepart', [])
      getUiasUserDetail({ id: this.userId, orgId: this.orgId }).then(res => {
        if (res.status == 200) {
          // for (let i = 0; i < res.data.orgPostList.length; i++) {
          //   const item = res.data.orgPostList[i];
          //   this.initlistUiasOrgPostdata(item.orgId, i);
          // }
          this.formData = { ...this.formData, ...res.data }
          this.$emit('userDetails', this.formData)
          if (this.formData.orgPostList.length != 0) {
            this.initlistUiasOrgPostdata('', 0)
          } else {
            this.initFailureData()
          }
          if (this.formData.mainLeader) {
            this.formData.mainLeader = this.formData.mainLeader.split(',')
          }
          this.initdata()
        }
      })
    },
    initFailureData() {
      getFailureUiasUserDetail({ id: this.userId, orgId: this.orgId }).then(res => {
        if (res.status == 200) {
          // for (let i = 0; i < res.data.orgPostList.length; i++) {
          //   const item = res.data.orgPostList[i];
          //   this.initlistUiasOrgPostdata(item.orgId, i);
          // }
          this.formData = { ...this.formData, ...res.data }
          if (this.formData.orgPostList.length != 0) {
            this.initlistUiasOrgPostdata('', 0)
          }
          if (this.formData.mainLeader) {
            this.formData.mainLeader = this.formData.mainLeader.split(',')
          }
          this.initdata()
        }
      })
    },
    /* 选择 */
    onPickerShow(type) {
      if (type == 0) {
        this.showPickerY = true
      } else {
        this.showPickerQ = true
      }
    },
    // 职位切换
    onConfirmQ(value) {
      this.formData.orgPostList[0].orgPostId = value.id
      this.showPickerQ = false
    },

    setData() {
      if (Array.isArray(this.formData.mainLeader)) {
        this.formData.mainLeader = this.formData.mainLeader.join(',')
      } else {
        this.formData.mainLeader = this.formData.mainLeader
      }
      this.submitData()
    },
    /* 提交数据 */
    submitData() {
      this.subLoading = true
      saveOrEditUser({ ...this.formData })
        .then(res => {
          this.subLoading = false
          if (res.status == 200) {
            updateOtherDeal({ id: this.needDealId }).then(res => {
              this.$dialog
                .alert({
                  message: `提交成功`,
                  closeOnClickOverlay: true,
                })
                .then(() => {
                  this.$router.go(-1)
                })
            })
          }
        })
        .catch(res => {
          this.subLoading = false
        })
      setTimeout(() => {
        this.subLoading = false
      }, 6000)
    },
  },
}
</script>

<style lang="scss" scoped>
.detail {
  padding: 14px;
  background-color: #f0f0f0;
  font-size: 13px;
  color: #333333;
  .box {
    padding: 14px;
    background-color: #ffffff;
    border-radius: 5px;
    .box_title {
      font-size: 16px;
      color: #333;
      margin: 10px 0;
      font-weight: bold;
      .text {
        background-image: linear-gradient(#ffffff 50%, #f9f1e8);
      }
    }
    .box_info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #efefef;
      .left {
        font-size: 14px;
      }
    }
  }
  .self_info {
    display: flex;
    .user_head {
      .iconfont {
        font-size: 12px0;
        color: #ccc;
      }
    }

    .user_info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #333;
      padding-left: 10px;

      .user_name {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 8px;
      }

      .user_post {
        font-size: 12px;
      }
    }
  }
  .subbmit {
    color: #56462c;
    // font-size: 14px;
    height: 36px;
    line-height: 36px;
    background-color: #0f61d5;
    font-weight: bold;
    border-radius: 4px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px auto 0;
  }

  .login_info,
  .basic_info,
  .verify_info {
    margin-top: 14px;
  }
  .verify_info {
    .box_info {
      flex-wrap: wrap;
      .right {
        padding: 5px 0;
      }
      /deep/.van-radio-group {
        .van-radio {
          margin-left: 20px;
          font-size: 13px;
          .van-radio__icon {
            font-size: 14px;
          }
          .van-radio__icon--checked .van-icon {
            background-color: #5f7290;
            border-color: #5f7290;
          }
        }
      }
    }
    .opinion {
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      .right {
        width: 100%;
      }
    }
  }
}
</style>
